<template>
  <div class="personal-main">
    <div class="personal-money">
      <h3><i>投资记录</i></h3>

      <div class="personal-moneylist" style="margin-top: 40px;">
        <div class="pmain-contitle">
          <span class="pmain-title1 fb" style="width: 150px;">
            名称
          </span>
          <span class="pmain-title2 fb" style="width: 70px;">
            投资金额
          </span>
          <span class="pmain-title3 fb" style="width: 200px;">
            投资时间
          </span>
          <span class="pmain-title1 fb" style="width: 300px;">操作</span>
        </div>
        <ul>
          <li
            v-for="transFlow in transFlowList"
            :key="transFlow.id"
            style="width:100%"
          >
            <span class="pmain-title1 pmain-height" style="width: 150px;">
              {{ transFlow.lend.title }}
            </span>
            <span class="pmain-title2 pmain-height" style="width: 70px;">
              {{ transFlow.transAmount }}
            </span>
            <span class="pmain-title3 pmain-height" style="width: 200px;">
              {{ transFlow.createTime }}
            </span>
            <span class="pmain-title1 fb" style="width: 70px;">
                <NuxtLink
                  class="ui-btn btn-gray"
                  :to="'/lend/' + transFlow.lend.id"
                  target="_blank"
                >
                  <el-button>查看</el-button>
                </NuxtLink>
            </span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      transFlowList: [],
    };
  },

  created() {
    this.fetchTransFlowList();
  },

  methods: {
    fetchTransFlowList() {
      this.$axios.$get('/api/core/transFlow/investlist').then((response) => {
        this.transFlowList = response.dataMap.list;
      });
    },
  },
};
</script>
